<template>
  <div class="line_display">
    <!-- 表格-->
    <!-- 排序 -->
    <div class="gao_liang">
      <a-row>
        <a-col :xs="10" :sm="8" :md="7" :lg="5" :xl="4">
          <div class="gao_liang_title">排序</div>
        </a-col>
        <a-col :xs="14" :sm="16" :md="17" :lg="19" :xl="20"></a-col>
      </a-row>
      <a-row>
        <a-col :xs="10" :sm="8" :md="7" :lg="5" :xl="4" style="text-align: right;">
          <span style="margin-right: 8px;">排序字段</span>
          <a-tooltip>
            <template slot="title">
              表格排序的字段
            </template>
            <a-icon type="exclamation-circle" />
          </a-tooltip>
          ：
        </a-col>
        <a-col :xs="14" :sm="16" :md="17" :lg="19" :xl="20">
          <a-select v-model="form.display.orderBy">
            <a-select-opt-group v-for="item in sortField" :key="item.id" :label="item.name">
              <a-select-option :value="item.id +'-' + out.name" v-for="(out, index) in JSON.parse(item.output)" :key="index">
                {{out.displayName}}
              </a-select-option>
            </a-select-opt-group>
          </a-select>
        </a-col>
      </a-row>
      <a-row>
        <a-col :xs="10" :sm="8" :md="7" :lg="5" :xl="4" style="text-align: right;">
          <span style="margin-right: 8px;">排序方式</span>
          <a-tooltip>
            <template slot="title">
              表格排序的方式
            </template>
            <a-icon type="exclamation-circle" />
          </a-tooltip>
          ：
        </a-col>
        <a-col :xs="14" :sm="16" :md="17" :lg="19" :xl="20">
          <a-radio-group v-model="form.display.order">
            <a-radio value="asc">
              升序
            </a-radio>
            <a-radio value="desc">
              降序
            </a-radio>
          </a-radio-group>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
import bus from '@/views/components/bus';
  export default {
    props: ['display', 'form'],
    data() {
      return {}
    },
    computed: {
      ...mapState('custom', ['DsList']),
      sortField () {
        let select_dataset = this.form.dataMapping.datasetIds;
        let sortTable = [];
        select_dataset.forEach(data => {
          let index = this.DsList.findIndex(item=> {
            return item.id == data
          })
          sortTable.push(this.DsList[index]);
        })
        return sortTable;
      }
    },
    methods: {
      ...mapActions('custom', ['getDsList']),
      onSubmit () {
        const _tableForm = this.form.display
        if (!_tableForm.orderBy) return false
        if (!_tableForm.order) return false
        return  true
      },
    },
    mounted() {
      this.getDsList({id: this.$route.query.id})
      bus.$on('verifyForm',(back)=>{
        back(this.onSubmit())
      })
    },
    beforeDestroy() {
      bus.$off('verifyForm')
    },
  }
</script>

<style scoped>
.gao_liang_title {
  font-size: 16px;
  font-weight: 500;
  color: rgba(0,0,0,.85);
}

.gao_liang div {
  line-height: 35px;
}

.mu_biao_xian {
  display: flex;
  justify-content: space-around;
}

.mu_biao_xian input {
    width: 45%;
}



.tu_li_position {
  display: flex;
  justify-content: space-around;
}

.tu_li_position input {
  width: 19%;
}

.gao_liang_title {
  text-indent: 10px;
}

.gao_liang>>>.ant-select.ant-select-enabled {
  width: 100%;
}
</style>